<template>
  <view class="bargain_container" :style="half?'width: 345rpx':'width: 702rpx'">
    <view class="floor_bargain_title">
      <image :src="staticUrl()+'/new/floor_group_more.png'" class="more" @click="clickJumpInfo">
      </image>
    </view>
    <!-- 数据 -->
    <swiper :interval="3000" autoplay circular class="swiper">
      <swiper-item v-for="(i, j) in goodsList" :key="j" class="swiper-item"
        :class="half?'half2':'half4'">
        <view v-for="(item, index) in i" :key="index" class="item" @click="clickJumpInfo">
          <!-- <image :src="staticUrl + '/home/groupImg.png'"></image> -->
          <!-- <image :src="item.original"></image> -->
          <ImageCache :src="item.original" class="image" />
          <view class="goodsName">
            <span class="goods_name singleRowEllipsis">{{ item.goodsName }}</span>
          </view>
          <view class="promotionPrice" v-if="hasToken() && item.promotionPrice">
            <text>￥</text>
            <text>{{ item.promotionPrice }}</text>
            <text>/套</text>
          </view>
          <view class="prices singleRowEllipsis" v-if="!hasToken()">
            <text class="login_see">登录可见</text>
          </view>
          <view class="prices singleRowEllipsis" v-if="hasToken() && !item.promotionPrice">
            <text class="login_see">资质审核可见</text>
          </view>
        </view>
      </swiper-item>
    </swiper>
  </view>
</template>

<script>
import { getDedicatedData } from '@/api/home/index'

export default {
  props: {
    data: {
      type: Object,
      default: () => { }
    },
    half: {
      type: Boolean,
      default: () => { }
    },
  },
  data () {
    return {
      goodsList: [],
    }
  },
  created () {
    this.getList()
  },
  methods: {
    // 跳转 详情
    clickJumpInfo (val) {
      uni.navigateTo({ url: `/subpackage/activity/portfolio` })
    },
    // 获取数据 组装数组
    getList () {
      getDedicatedData(this.data.promotion.promotionGoodsPath)
        .then(res => {
          let goods = res.data[0].promotionGoodsVOList
          if (res.code === 200 && goods.length > 0) {
            let a = this.half ? 2 : 4
            let num = Math.ceil(goods.length / a)
            for (let i = 0; i < num; i++) {
              this.$set(this.goodsList, i, goods.slice(i * a, i * a + a))
            }
          }
        })
    },
  }
}
</script>

<style lang="scss" scoped>
.half {
  width: 345rpx;
  background-image: url("https://www.xdyy100.com/wholesale/files/mp/static/new/floor_group.png");
}
.whole {
  background-image: url("https://www.xdyy100.com/wholesale/files/mp/static/new/floor_group2.png");
}
.bargain_container {
  background-size: 100%;
  background-repeat: no-repeat;
  height: 253rpx;
  .floor_bargain_title {
    position: relative;
    .more {
      width: 79rpx;
      height: 44rpx;
      position: absolute;
      top: 14rpx;
      right: 0;
      image {
        width: 100%;
        height: 100%;
      }
    }
  }
  .swiper {
    height: 175rpx;
    margin: 0 12rpx;
    padding-top: 62rpx;
    .swiper-item {
      display: flex;
      flex-flow: row wrap;
      align-items: center;
      .item {
        width: 155rpx;
        height: 175rpx;
        background: #ffffff;
        // box-shadow: 0rpx 0rpx 1rpx 1rpx rgba(239, 35, 27, 0.5);
        border-radius: 8rpx 8rpx 8rpx 8rpx;
        display: flex;
        flex-flow: column nowrap;
        margin-right: 10rpx;
        .image {
          width: 95rpx;
          height: 76rpx;
          margin: 16rpx auto 0;
        }
        .goodsName {
          margin: 0 16rpx;
          display: flex;
          align-items: center;
          justify-content: center;
          .goods_name {
            font-size: 20rpx;
          }
        }
        .promotionPrice {
          color: #ef231b;
          text-align: center;
          text:nth-child(1) {
            font-size: 20rpx;
          }
          text:nth-child(2) {
            font-size: 26rpx;
            font-weight: bold;
          }
          text:nth-child(3) {
            font-size: 18rpx;
            color: #999999;
          }
        }
        .prices {
          text-align: center;
          .login_see {
            font-size: 24rpx;
            color: #ef231b;
          }
        }
      }
      .item:nth-child(2) {
        margin-right: 0;
      }
    }
    .half2 {
      grid-template-columns: repeat(2, 1fr);
    }
    .half4 {
      grid-template-columns: repeat(4, 1fr);
    }
  }
}
</style>
